import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: ${props => props.theme.background};
    color: ${props => props.theme.text};
    transition: all 0.3s ease;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;

    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 20%, rgba(65, 105, 225, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(159, 122, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(100, 149, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(147, 112, 219, 0.15) 0%, transparent 50%);
      animation: gradient-shift 20s ease infinite alternate;
      z-index: 0;
    }

    &::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(120px);
      z-index: 1;
      pointer-events: none;
    }
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }

  a {
    color: ${props => props.theme.primary};
    text-decoration: none;
  }

  @keyframes gradient-shift {
    0% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.2) rotate(2deg);
    }
    50% {
      transform: scale(1.1) rotate(-1deg);
    }
    75% {
      transform: scale(1.3) rotate(1deg);
    }
    100% {
      transform: scale(1.1) rotate(-2deg);
    }
  }

  #root {
    position: relative;
    z-index: 2;
  }
`;
